<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  .red{
    color: red;
  }
  .blue{
    color: blue;
  }
</style>
<body>
<!--练习需求：点击列表中的哪一项，则哪一项的内容变成红色，未点击的就变回蓝色-->
<div id="app">
  <ul>
<!--    <li v-for="item in movies">{{item}}</li>-->
    <li v-for="(item,index) in movies" v-bind:class="count==index ? {red:red} :['blue'] "
        v-on:click="change(index)">{{index + 1}}-{{item}}</li>
  </ul>
</div>
<script src="../js/vue.js"></script>
<script>
  const vm=new Vue({
    el:'#app',
    data:{
      count:0,
      movies:['黑猫警长','铁壁阿童木','网球王字','铁甲小宝'],
      red:true
    },
    methods:{
      change(index){
        this.count=index
      }
    }
  })
</script>

</body>
</html>